<template>
  <div id="home">
    <!-- 搜索框 -->
    <div class="search">
        <form action="/">
          <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            shape="round"
            background="indigo"
            @search="onSearch"
          />
       </form>
    </div>
    <!-- 主体 -->
    <div class="container">
      <!-- 轮播图 -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="banner in banners"
            :key="banner.id"
          >
            <img :src="banner.imageUrl" alt="">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <!-- 广告 -->
      <div class="grids">
        <div class="left">
        </div>
        <div class="right">
          <div class="top">
          </div>
          <div class="bottom">
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <van-divider>小编精选，全场特惠(*^▽^*)</van-divider>
      <!-- 热销 -->
      <div class="hot">
      </div>
      <!-- 精选 -->
      <div class="jingxuan">
        <ul>
          <li
            v-for="list in lists"
            :key="list.id"
          >
            <div class="img">
              <img :src="list.image">
            </div>
            <div class="desc">
              <p class="title">{{ list.title }}</p>
              <div class="sale" >
                <span class="price" style="color:#f40;float:left">券后￥{{ list.price }}</span>
                <span class="saleNum" style="font-size:12px; color:#ccc;float:right">已抢{{ list.saleNum }}单</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { Search, List, Divider } from 'vant'

Vue.use(Search)
Vue.use(List)
Vue.use(Divider)
export default {
  name: 'Home',
  data () {
    return {
      value: '',
      banners: [],
      lists: [],
      loading: false,
      finished: false,
      currentPage: 1
    }
  },
  created () {
    // 异步请求轮播图数据
    this.$http.getBanner()
      .then(resData => {
        this.banners = resData.banners
        this.lists = resData.items.list
        // if (this.lists.type === 2) {
        //   this.isShow = false
        // }
      })
      .then(() => {
        this.$nextTick(() => {
          /* eslint-disable */
          new Swiper ('.swiper-container', {
            loop: true, // 循环模式选项
            // 如果需要分页器
            autoplay:true,
            pagination: {
              el: '.swiper-pagination',
            },
            effect : 'fade',
            fadeEffect: {
              crossFade: true,
            }
          })
        })
      })
    },

  // mounted () {
  //   console.log(this.$http)
  //   /* eslint-disable */
  //   new Swiper ('.swiper-container', {
  //   loop: true, // 循环模式选项
  //   // 如果需要分页器
  //   pagination: {
  //     el: '.swiper-pagination',
  //   },
  //   effect : 'fade',
  //   fadeEffect: {
  //     crossFade: true,
  //   }
  // })
  // },
  methods: {
    onSearch () {
    }
  }
}

</script>

<style lang="scss" scoped>
  .container {
    padding: 0 10px;

    .swiper-container {
    // height: 140px;
    margin-top: 10px;
    border-radius: 20px;
    --swiper-pagination-color: #ff6600;
    }
    .grids {
      display: flex;
      margin-top: 10px;
      justify-content: space-between;
      .left {
        background-color: gold;
        width: 48%;
        height: 130px;
        border-radius: 5px;
      }
      .right {
        width: 48%;
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top {
          width: 100%;
          height: 60px;
          border-radius: 5px;
          background-color: hotpink;
        }
        .bottom {
          width: 100%;
          height: 60px;
          border-radius: 5px;
          background-color: indigo;
        }

      }
    }
    .jingxuan {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
        width: 48%;
        border-radius: 5px;
        box-sizing: border-box;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; 
          font-size: 15px;
          line-height: 50px;
          .sale {
            margin: 10px;
            .saleNum {
              font-size: 8px;
            }
          }
        }
      }
      }
      
    }
  }
</style>
